<template>
    <div class="nav_wrap" id="nav" ref="nav">
        <div class="container nav">
            <div class="logo_img_wrap fl">
                <img src="/static/imgs/logo.png" alt="">
            </div>
            <div class="search_wrap fl">
                <img src=""
                    alt="">
                <input placeholder="昵称" type="text" v-model="content" @input="search">
            </div>
            <ul class="nav_links fl">
                <router-link exact :to="{name: 'home'}">
                    <li class="nav_item center">
                        <span>
                            首页
                        </span>
                    </li>
                </router-link>
                <router-link exact :to="{name: 'findPeople',params:{key: defaultkey}}">
                    <li class="nav_item center">
                        <span>
                            找陪玩
                        </span>
                    </li>
                </router-link>
                <router-link :to="{name: item.link}" v-for="(item, index) in navList" :key="index">
                    <li class="nav_item center">
                        <span>
                            {{item.name}}
                        </span>
                    </li>
                </router-link>
                <router-link v-if="!hasToken" exact to="{name: ''}">
                    <li class="nav_item center" @click="showLogin">
                        <span>登录 | 注册</span>
                    </li>
                </router-link>
            </ul>
            <!-- 用户信息 -->
            <div class="photo_wrap fr" v-if="hasToken" @mouseover="show=true" @mouseout="show=false">
                <img class="photo" :src=userInfo.avatar>
                <img width=15
                    src=""
                    alt="">
            </div>
            <div class="float_box center" v-if="hasToken" :class="{'show': show}" @mouseover="show=true"
                @mouseout="show=false">
                <div class="photo1">
                    <img class="img1" :src=userInfo.avatar alt="">
                </div>
                <p class="username">{{userInfo.nickname}} <img v-if='userInfo.sex==2'
                        src=""
                        alt="">
                    <img v-if="userInfo.sex==1"
                        src=""
                        alt=""></p>
                <p>id: <span>{{userInfo.openid}} </span></p>
                <div v-if="userInfo.stype==0">
                    <ul class="links">
                        <router-link :to="{name:'order'}" tag="li" class="item">
                            <img
                                src="">
                            <p>订单中心</p>
                        </router-link>
                        <router-link :to="{name:'join'}" tag="li" class="item">
                            <img
                                src="">
                            <p>成为陪玩</p>
                        </router-link>
                        <router-link :to="{name:'purse'}" tag="li" class="item">
                            <img
                                src="">
                            <p>我的钱包</p>
                        </router-link>
                    </ul>
                </div>
                <div v-if="userInfo.stype==1" :class="{'online': userInfo.online_status == 1}">
                    <div class="taking" v-if="userInfo.online_status == 0" @click="onOfflineReceipt(0)">开始接单</div>
                    <div class="taking" v-if="userInfo.online_status == 1" @click="onOfflineReceipt(1)">结束接单</div>
                    <ul class="links">
                        <router-link :to="{path:'/userCenter/order'}" tag="li" class="item">
                            <img
                                src="">
                            <p>订单中心</p>
                        </router-link>
                        <router-link :to="{path:'/userCenter/service'}" tag="li" class="item">
                            <img
                                src="">
                            <p>服务管理</p>
                        </router-link>
                        <router-link :to="{path:'/userCenter/purse'}" tag="li" class="item">
                            <img
                                src="">
                            <p>我的钱包</p>
                        </router-link>
                    </ul>
                </div>
                <div class="footer_link" :class="{'online': userInfo.stype==1 && userInfo.online_status == 1}">
                    <router-link :to="{path:'/userCenter/order'}" tag="li" class="item">
                        <span class="fl">个人中心</span>
                    </router-link>
                    <span @click="out" class="fr">退出登录</span>
                </div>
            </div>
        </div>
    </div>

</template>
<script>
    import utils from '../utils.js';
    import {
        mapState,
        mapMutations,
    } from 'vuex'
    export default {
        data() {
            return {
                show: false,
                content: '',
                searchAjax: '',
                searchDebunce: ''
            }
        },
        computed: {
            ...mapState(['hasToken', 'showLoginBox', 'navList', 'userInfo', 'defaultkey'])
        },

        methods: {
            ...mapMutations(['SHOWLOGIN', 'UPDATEONLINESTATUS','UPDATESEARCHINFO','UPDATETOKEN']),
            async search() { //防抖
                var a = await this.searchAjax();
                if (a.code == 200) {
                    this.UPDATESEARCHINFO(a.data);
                    if (this.$route.name != 'search') {
                        this.$router.push({
                            name: 'search',
                        })
                    }
                }

            },
            showLogin() {
                this.SHOWLOGIN(true)
            },
            out() {
                this.UPDATETOKEN(false)
                this.$router.push({
                    name: 'home'
                })
            },
            onOfflineReceipt(status) { //
                var s = status == 0 ? 1 : 0
                this.$http.put('/v1/user/onOfflineReceipt', {
                    online_status: s
                }).then((data) => {
                    var d = data.data;
                    if (d.code == 200) {
                        this.UPDATEONLINESTATUS(s)
                    } else {

                    }
                })
            }
        },
        created() {
            this.searchAjax = function () {
                return new Promise((resolve, reject) => {
                    this.searchDebunce(resolve)
                })
            }

            this.searchDebunce = utils.debunce((args) => {
                if (args) {
                    var resolve = args[0]
                }
                this.$http.get('/v1/index/search', {
                    params: {
                        keyword: this.content
                    }
                }).then((data) => {
                    var d = data.data;
                    resolve && resolve(d)
                })
            }, 500)

        },
        mounted() {},
        activated() {}
    }

</script>
<style lang='scss' scoped>
    .taking {
        width: 200px;
        height: 40px;
        background: rgba(246, 246, 246, 1);
        border-radius: 10px;
        line-height: 40px;
        text-align: center;
        margin: 10px auto;
        cursor: pointer;
    }

    .online .taking {
        background: #FF4C2E;
        color: #fff;
    }

    .nav_wrap {
        background: #fff;
        box-shadow: 0px 0px 8px 0px rgba(255, 76, 46, 0.2);
    }

    .nav {
        height: 100px;
        position: relative;

        .logo_img_wrap {
            margin-top: 22px;
        }

        .search_wrap {
            position: relative;
            width: 140px;
            height: 34px;
            border-radius: 50px;
            border: 1px solid #cccccc;
            margin-left: 50px;
            margin-top: 32px;

            img {
                position: absolute;
                left: 9px;
                top: 8px;
                cursor: pointer;
            }

            input {
                float: left;
                width: 106px;
                height: 34px;
                padding-left: 33px;
                line-height: 24px;
                border: none;
                outline: none;
                background: none;
            }

        }

        .nav_links {
            line-height: 100px;
            margin-left: 30px;

            .nav_item {
                display: inline-block;
                width: 100px;

                span {
                    display: inline-block;
                    padding-bottom: 4px;
                    line-height: 1.5;
                }

                :hover {
                    color: #FF4C2E
                }
            }
        }
    }

    .photo_wrap {
        cursor: pointer;
        margin-top: 20px;
        height: 80px;
    }

    .photo {
        width: 50px;
        height: 50px;
        border-radius: 100%;
    }

    .float_box {
        display: none;
        position: absolute;
        width: 320px;
        box-shadow: 0px 0px 8px 0px rgba(255, 76, 46, 0.2);
        border-radius: 20px;
        right: -140px;
        top: 80px;
        background: #fff;
        z-index: 99;

        &.show {
            display: block;
        }

        .photo1 {
            display: inline-block;
            width: 76px;
            height: 76px;
            border: 3px solid rgba(255, 76, 46, 1);
            border-radius: 50%;
            overflow: hidden;
            margin-top: 20px;

            .img1 {
                width: 76px;
                height: 76px;

            }
        }

        .online .links .item p {
            color: #FF4C2E;
        }

        .links {
            overflow: hidden;
            margin-top: 20px;

            .item {
                float: left;
                margin-left: 48px;
                cursor: pointer;

                p {
                    color: #999;
                    font-size: 12px;
                }
            }
        }
    }

    .username {
        margin-top: 5px;
    }

    .footer_link {
        overflow: hidden;
        margin: 28px 20px 19px;
        color: #666;
        font-size: 14px;

        span {
            cursor: pointer;
        }

        &.online {

            color: #FF4C2E
        }
    }

</style>
